<template>
	<view>
		<image class="upload" src="/static/camera-black.png" mode="scaleToFill" @click="toApply"></image>
		<!-- 自定义沉浸式导航栏 -->

		<view class="navbar" ref="navbar" :style="{ opacity: opacity}">
			<!-- 状态栏高度 -->
			<!-- #ifdef MP-WEIXIN -->
			
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
		   	   <view :style="safeTopStyle">&nbsp;</view>
			<!-- #endif -->
			<!-- navbar 部分 -->
			<view class="titlebar">
				<text class="title"></text>
				<image class="camera" src="/static/camera-black.png" mode="scaleToFill" @click="toApply"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			scrollTop: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				topSafeHeight: 0,
				opacity: 0
			}
		},
		computed: {
			safeTopStyle() {
				return `height: ${this.topSafeHeight}px`;
			},
		},
		mounted() {
			this.topSafeHeight = uni.getWindowInfo().safeAreaInsets.top;
		},
		watch: {
			scrollTop(value) {
				if (value > 100) {
					this.opacity = 1
				} else { 
					this.opacity = 0
				}
			}
		},
		methods: {
			toApply() {
				this.$navTo('pages/find/apply', {  })
			},
		}
	}
</script>

<style scoped lang="scss">
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	//#ifdef H5
	// position: absolute;
	//#endif
	opacity: 0;
	background-color: rgba(255, 255, 255, 1);
	transition-property: opacity;
	transition-duration: 300ms;
	box-shadow: 0 10rpx 10rpx -10rpx rgba(0, 0, 0, 0.1);
	
	.titlebar {
		height: 90rpx;
		position: relative;
		display: flex;
		align-content: center;
		.title {
			line-height: 90rpx;
			font-size: 18px;
			color: #000;
			flex: 1;
			font-weight: bold;
			text-align: center;
		}
		
		.camera {
			position: absolute;
			right: 30rpx;
			top: 26rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.upload {
	position: fixed;
	top: 26rpx;
	z-index: 999;
	right: 30rpx;
	width: 40rpx;
	height: 40rpx;
}
@media (min-width: 490px) {
	.upload {
		// #ifdef H5
		position: absolute;
		top: -64rpx;
		// #endif
	}
}
</style>